<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层级选择器</title>
    <style>
        /* *{
            padding: 0;
            margin: 0;
        } */

        /* 子代选择器 */
        /* .ul1>li{
            background-color: green;
        }
        .ul2>li>p{
            background-color:red;
        } */

        /*后代选择器写法 
        ul li{
            background-color: green;
        }
          ul p{
            background-color:red;
        } */

        /* 计算权重 权重一样时采取就近原则 */       
        ul>li>p{
            background-color: green;
        }
        ul li p{
            background-color:red;
        }

        .box ul li{
            background-color: blue;
        }
        .box .inner ul li{
            background-color: brown;
        }
    </style>
</head>
<body>
    <!-- 
        层级选择器--子代选择器 后代选择器
            子代选择器：选择器1>选择器2{} 选择器1>选择器2>选择器3{}

            后代选择器：选择器1 选择器2{} 可以直接跳过中间的选择器到最后面的选择器
     -->
     <ul class="ul1">
        <li>我是单独的ul li标签</li>
     </ul>
     <ul class="ul2">
        <li>
            <p>我是ul li里面的p</p>
        </li>
     </ul>

     <div class="box">
        <div class="inner">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <div>div</div>
            <div class="con">
                <ul>
                    <li>con1</li>
                    <li>con2</li>
                </ul>
            </div>
        </div>
     </div>
</body>
</html>